<template>
	<!-- 申报记录 -->
	<div id="">
		
		    <!-- 头部 -->
		    <div style="width: 100%; min-width: 1920px;">
		        
		        <div class="banner_title"></div>
		    </div>
		
		    <!-- 内容 -->
		    <div class="content_table">
		        <div style="padding: 71px 105px; margin: 0 auto;">
		            <div class="externalFrame shadow">
		                <div class="functionLine">
		                    <span style="font-weight: bolder; margin-right: 27px;">查看申报记录</span>
							<el-button style="padding: 10px;">+ 新增申报</el-button>
		                    <!-- 删除图标没找 -->
		                    <button id="deleteButton"><i class="el-icon-delete-solid"></i>   删除</button>
							
		                       
		                </div>
		                <div class="tableFrame shadow" style="text-align: center; line-height: 46px;">
		                   
						   <el-table :data="declareList">
							   <el-table-column type="selection" width="55"></el-table-column>
							   <el-table-column label="序号" prop="id"></el-table-column>
							   <el-table-column label="材料编号" prop="clbh"></el-table-column>
							   <el-table-column label="姓名" prop="name"></el-table-column>
							   <el-table-column label="填报时间" prop="createTime"></el-table-column>
							   <el-table-column label="更新时间" prop="updateTime"></el-table-column>
							   <el-table-column label="拟报职称" prop="jobtitle"></el-table-column>
							   <el-table-column label="职称等级" prop="grade"></el-table-column>
							   <el-table-column label="申报专业" prop="zy"></el-table-column>
							   <el-table-column label="推荐单位或地区" width="150" prop="dw_dj"></el-table-column>
							   <el-table-column label="查看">
								   <template slot-scope="scope">
								           <i class="el-icon-view"></i>
								     </template>
								   
							   </el-table-column>
							   <el-table-column label="下载" >
								   <template slot-scope="scope">
								           <i class="el-icon-download"></i>
								     </template>

							   </el-table-column>
						   </el-table>
						   
		                </div>
		               
					
					
					
					
					
					<div class="paginationFrame" style="margin-top: 27px;">
		                    <nav aria-label="Page navigation example">
		                        <ul class="pagination justify-content-center">
		                          <!-- <li class="page-item disabled"><a class="page-link">Previous</a></li> -->
		                          <li class="page-item"><a class="page-link shadow" href="#">1</a></li>
		                          <li class="page-item"><a class="page-link shadow" href="#">2</a></li>
		                          <li class="page-item"><a class="page-link shadow" href="#">3</a></li>
		                          <li class="page-item"><a class="page-link shadow" href="#">......</a></li>
		                          <li class="page-item"><a class="page-link shadow" href="#">下一页</a></li>
		                        </ul>
		                      </nav>
		                </div>
						
						
		                <!-- 遮罩层 -->
		                <div id="mask">
		                </div>
		                <!-- 删除确认框 -->
		                    <div class="deleteConfirmContent">
		                        <span style="display: inline-block; margin-top: 105px">是否删除已选中选项？</span>
		                        <div style="margin-top: 71px;">
		                            <button id="confirmDeleteButton" style="background-color: rgb(48, 102, 227);">确定删除</button>
		                            <button id="cancelDeleteButton" style="background-color: rgb(153, 153, 153);">取消删除</button>
		                        </div>
		                    </div>
		                <!-- 下载类型框 -->
		                    <div class="downloadTypeContent">
		                        <span style="display: inline-block; margin-top: 105px">请选择下载类型内容</span>
		                        <div style="margin-top: 71px;">
		                            <button id="downloadButton1" style="background-color: rgb(48, 102, 227);">打包下载</button>
		                            <button id="downloadButton2" style="background-color: rgb(48, 102, 227);">说明下载</button>
		                        </div>
		                    </div>
		                <!-- 查看信息框 -->
		                    <div class="seeInformationContent" style="padding: 76px 0px 0px 64px;">
		                        <div></div>
		                        <div>
		                            <span>姓名：</span>李四<br>
		                            <span>材料编号：</span>S1007<br>
		                            <span>身份证号码：</span>513921********0194<br>
		                            <span>联系电话：</span>182****8547<br>
		                            <span>工作单位：</span>四川省成都市某某公司
		                        </div>
		                    </div>
		            </div>
		        </div>
		    </div>

	</div>
	
</template>

<script>
	
	export default {
		name:'',
		data(){
			return{
				// 申报记录集合
				declareList:[
					{
						id:1,
						clbh:'sg1278',
						name:'张三',
						createTime:'2020-10-1',
						updateTime:'2022-12-13',
						jobtitle:'工程师',
						grade:'高级',
						zy:'大地测量',
						dw_dj:'测绘局'
					}
				]
			}
		}
	}
	
</script>

<style>
	
	
	button{
	    border: 0px;
	    background-color: white;
	}
	/* 标题栏 */
	.titleBlock{
	    height: 300px;
	    width: 1920px;
	    padding: 140px 0px 0px 430px;
	}
	/* 标题内容 */
	.titleContent{
	  height: 32px;
	  width: 370px;
	  border-left: 5px solid blue;
	  line-height: 29px;
	}
	/* 外部框架样式 */
	.externalFrame{
	    padding: 27px 24px;
	    /* border: 1px solid #000; */
	    background-color: white;
	    border-radius: 0.5%;
	}
	/* 框架内部功能行样式 */
	.functionLine{
	    height: 20px;
	    /* border: 1px solid #000; */
	    line-height: 20px;
	    margin-bottom: 27px;
	}
	/* 框架内部功能行内部功能按钮样式 */
	.functionLine>button{
	    border: 0px;
	    border-radius: 5%;
	    font-size: 14px;
	    padding: 0px 10px;
	}
	/* 框架内部功能行内部新增功能按钮样式 */
	.functionLine>button:nth-child(2){
	    background-color: rgb(48, 102, 227);
	    color: white;    
	}
	/* 框架内部功能行内部删除功能按钮样式 */
	.functionLine>button:nth-child(3){
	    background-color: rgb(236, 240, 255);
	    float: right;
	}
	/* 框架内部分页框架样式 */
	.paginationFrame a{
	    padding: 6px 16px;
	    background-color: rgb(48, 102, 227);
	    border-radius: 10%;
	    margin-right: 17px;
	    color: white;
	}
	 /* 遮罩层 */
	 #mask{
	    width:100%;
	    height:100%;
	    background-color: rgba(0, 0, 0, 0.3);
	    position: fixed;
	    top:0;
	    left:0;
	    display: none;
	    z-index: 9;
	}
	/* 删除确认和下载类型遮罩层内部内容 */
	.deleteConfirmContent,
	.downloadTypeContent,
	.seeInformationContent{
	    width: 500px;
	    height: 334px;
	    background-color: white;
	    border-radius: 5%;
	    text-align: center;
	    font-weight: bolder;
	    position: absolute;
	    left: 630px;
	    top: 420px;
	    z-index: 10;
	    display: none;
	}
	 /* 删除确认和下载类型遮罩层内部功能按钮样式 */
	 .deleteConfirmContent button,
	 .downloadTypeContent button{
	    padding: 6px 10px;
	    margin: 0px 45px;
	    border: 0px;
	    border-radius: 5%;
	    color: white;
	    font-weight: bolder;
	 }
	 /* 查看信息遮罩层内部内容背景图片样式 */
	 .seeInformationContent>div:nth-child(1){
	    background-image: url(../../public/img/headPortrait.png);
	    width: 139px; height: 184px;
	    border: 0;
	    border-radius: 1%;
	    float: left;
	    /* margin-top: 37px; */
	 }
	/* 查看信息遮罩层内部内容文字样式 */
	.seeInformationContent>div:nth-child(2){
	    width: 270px;
	    float: left;
	    text-align: left;
	    padding: 11px 0px 0px 36px;
	    font-size: 14px;
	    font-weight: 500;
	 }
	.seeInformationContent>div:nth-child(2)>span{
	    display: inline-block;
	    margin-bottom: 15px;
	    font-weight: bolder;
	 }
	 /* 查看图标 */
	.seeInformationButton>i{
	    color: gray;
	    font-size: 25px;
	 }
	 /* 下载图标 */
	.downloadButton>i{
	    color: gray;
	    font-size: 25px;
	 }
	 
	 .banner_title{
		 background: url(../../public/img/5-0-1.png) no-repeat;
		 width: 100%; 
		 background-size: 100% 100%;
		 height: 300px;
		padding-top: 80px;
		 
	 }
	 
	 .content_table{
		 background-color: #E5EBFF;
	 }
	

</style>
